<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="js/common/echats5.3.0.js"></script>
    <script src="js/common/jquery-2.1.4.min.js"></script>
    <script src="js/common/echarts-gl.min.js"></script>
    <script src="js/common/rem.js"></script>
    <script src="js/common/fangshan.js"></script>
    <script src="https://webapi.amap.com/maps?v=2.0&key=58b2727d1279ff7cdae043dc1159051f"></script>
    <script src="https://webapi.amap.com/loca?v=2.0.0&key=58b2727d1279ff7cdae043dc1159051f"></script>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="./css/animate.min.css" />
    <link rel="stylesheet" href="./css/animate.css" />
    <link rel="stylesheet" href="./css/fs.css" />
    <script src="js/common/countNum.js"></script>
    <script src="js/common/crypto-js.min.js"></script>
    <script src="js/common/url.js"></script>
</head>
<body style="overflow: hidden">
<div class="head">
    <img src="images/fs/fshead.png" alt="">
</div>
<!--左侧-->
<div class="fsLeft">
    <div class="left-box">
<!--终端运行情况-->
        <div class="terminal-box">
            <div class="terminal-title">终端运行情况</div>
            <div class="terminal-con">
                <div class="terminal-map" id="terminalMap"></div>
                <div class="terminal-list">
                    <div class="terminal-item">
                        <div class="terminal-item-title terminal-spec-one">
                            <span></span>在线终端
                        </div>
                        <div class="terminal-num"><span id="onlineTerminal">0</span>台</div>
                    </div>
                    <div class="terminal-item">
                        <div class="terminal-item-title terminal-spec-two">
                            <span></span>故障终端
                        </div>
                        <div class="terminal-num"><span id="malfunctionTerminal">0</span>台</div>
                    </div>
                    <div class="terminal-item">
                        <div class="terminal-item-title terminal-spec-three">
                            <span></span>离线终端
                        </div>
                        <div class="terminal-num"><span id="offlineTerminal">0</span>台</div>
                    </div>
                </div>
            </div>
        </div>
<!--        应用使用情况-->
        <div class="useful-box">
            <div class="terminal-title">应用使用情况</div>
            <div class="use-con">
                <div class="use-tab-box">
                    <div class="use-tab-item use-tab-spec" data-type="">总量</div>
                    <div class="use-tab-item" data-type="thisYear">本年</div>
                    <div class="use-tab-item" data-type="thisMonth">本月</div>
                    <div class="use-tab-item" data-type="today">当日</div>
                </div>
                <div class="use-map-box">
                    <div class="use-map" id="useMapChart"></div>
                    <div class="use-legend-box">
                        <div class="use-legend-item">
                            <div class="use-legend-item-one">
                                <div class="terminal-item-title use-spec-one">
                                    <span></span>证明服务
                                </div>
                                <div class="terminal-num"><span id="use-zmfu">0</span>次</div>
                            </div>
                            <div class="use-legend-item-one">
                                <div class="terminal-item-title use-spec-two">
                                    <span></span>便民服务
                                </div>
                                <div class="terminal-num"><span id="use-bmsf">0</span>次</div>
                            </div>
                        </div>
                        <div class="use-legend-item">
                            <div class="use-legend-item-one">
                                <div class="terminal-item-title use-spec-three">
                                    <span></span>公共服务
                                </div>
                                <div class="terminal-num"><span id="use-ggsf">0</span>次</div>
                            </div>
                            <div class="use-legend-item-one">
                                <div class="terminal-item-title use-spec-four">
                                    <span></span>政务服务
                                </div>
                                <div class="terminal-num"><span id="use-zwsf">0</span>次</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
<!--        各乡镇终端使用情况-->
        <div class="per-town-box">
          <div class="town-title">
              <div class="town-left"></div>
              <div class="town-text">各乡镇终端使用情况</div>
              <div class="town-line"></div>
              <div class="town-icon"></div>
          </div>
            <div class="town-tab">
                <div class="town-tab-item town-tan-item-spec" data-type="zw">政务</div>
                <div class="town-tab-item" data-type="cx">公共</div>
                <div class="town-tab-item" data-type="bmgj">便民</div>
                <div class="town-tab-item" data-type="zm">证明</div>
            </div>
            <div class="town-list-box">
                <ul id="perTownList">
                </ul>
            </div>
        </div>
    </div>
</div>
<!--右侧-->
<div class="fs-right">
    <div class="right-box">
<!--        办件统计-->
        <div class="count-box">
            <div class="terminal-title">办件统计</div>
            <div class="count-con">
                <div class="count-item">
                    <div class="town-title">
                        <div class="town-left"></div>
                        <div class="town-text">政务服务类</div>
                        <div class="town-line"></div>
                        <div class="town-icon"></div>
                    </div>
                    <div class="count-item-con">
                       <div class="count-item-list">
                           <div class="count-list-title">
                               <div class="count-title-bg"></div>
                               <div class="count-title-text">本年办件</div>
                           </div>
                           <div class="count-num"><span id="goverYear">0</span>件</div>
                       </div>
                        <div class="count-item-list">
                            <div class="count-list-title">
                                <div class="count-title-bg"></div>
                                <div class="count-title-text">本月办件</div>
                            </div>
                            <div class="count-num"><span id="goverMonth">0</span>件</div>
                        </div>
                        <div class="count-item-list">
                            <div class="count-list-title">
                                <div class="count-title-bg"></div>
                                <div class="count-title-text">当日办件</div>
                            </div>
                            <div class="count-num"><span id="goverWeek">0</span>件</div>
                        </div>
                    </div>
                </div>
                <div class="count-item">
                    <div class="town-title">
                        <div class="town-left"></div>
                        <div class="town-text">证明类</div>
                        <div class="town-line"></div>
                        <div class="town-icon"></div>
                    </div>
                    <div class="count-item-con">
                        <div class="count-item-list">
                            <div class="count-list-title">
                                <div class="count-title-bg"></div>
                                <div class="count-title-text">本年办件</div>
                            </div>
                            <div class="count-num"><span id="proveYear">0</span>件</div>
                        </div>
                        <div class="count-item-list">
                            <div class="count-list-title">
                                <div class="count-title-bg"></div>
                                <div class="count-title-text">本月办件</div>
                            </div>
                            <div class="count-num"><span id="proveMonth">0</span>件</div>
                        </div>
                        <div class="count-item-list">
                            <div class="count-list-title">
                                <div class="count-title-bg"></div>
                                <div class="count-title-text">当日办件</div>
                            </div>
                            <div class="count-num"><span id="proveWeek">0</span>件</div>
                        </div>
                    </div>
                </div>
                <div class="count-item">
                    <div class="town-title">
                        <div class="town-left"></div>
                        <div class="town-text">查询类</div>
                        <div class="town-line"></div>
                        <div class="town-icon"></div>
                    </div>
                    <div class="count-item-con">
                        <div class="count-item-list">
                            <div class="count-list-title">
                                <div class="count-title-bg"></div>
                                <div class="count-title-text">本年查询</div>
                            </div>
                            <div class="count-num"><span id="queryYear">0</span>次</div>
                        </div>
                        <div class="count-item-list">
                            <div class="count-list-title">
                                <div class="count-title-bg"></div>
                                <div class="count-title-text">本月查询</div>
                            </div>
                            <div class="count-num"><span id="queryMonth">0</span>次</div>
                        </div>
                        <div class="count-item-list">
                            <div class="count-list-title">
                                <div class="count-title-bg"></div>
                                <div class="count-title-text">当日查询</div>
                            </div>
                            <div class="count-num"><span id="queryWeek">0</span>次</div>
                        </div>
                    </div>
                </div>
                <div class="count-item">
                    <div class="town-title">
                        <div class="town-left"></div>
                        <div class="town-text">便民工具类</div>
                        <div class="town-line"></div>
                        <div class="town-icon"></div>
                    </div>
                    <div class="count-item-con">
                        <div class="count-item-list">
                            <div class="count-list-title">
                                <div class="count-title-bg"></div>
                                <div class="count-title-text">本年使用</div>
                            </div>
                            <div class="count-num"><span id="toolsYear">0</span>次</div>
                        </div>
                        <div class="count-item-list">
                            <div class="count-list-title">
                                <div class="count-title-bg"></div>
                                <div class="count-title-text">本月使用</div>
                            </div>
                            <div class="count-num"><span id="toolsMonth">0</span>次</div>
                        </div>
                        <div class="count-item-list">
                            <div class="count-list-title">
                                <div class="count-title-bg"></div>
                                <div class="count-title-text">当日使用</div>
                            </div>
                            <div class="count-num"><span id="toolsWeek">0</span>次</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
<!--        各乡镇办件量统计-->
        <div class="per-count-box">
            <div class="terminal-title">各乡镇办件量统计</div>
            <div class="per-count-map">
                <div class="per-count-tab-box">
                    <div class="per-count-tab-item per-spec-tab" data-type="">总量</div>
                    <div class="per-count-tab-item" data-type="zw">政务服务类</div>
                    <div class="per-count-tab-item" data-type="zm">证明类</div>
                    <div class="per-count-tab-item" data-type="cx">查询类</div>
                    <div class="per-count-tab-item" data-type="bmgj">便民工具类</div>
                </div>
                <div class="per-map-box" id="perTownCount"></div>
            </div>
        </div>
    </div>
</div>

<!-- 地图 -->
<div id="map" style="
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                z-index: 0;
            "></div>
<!-- 图例 -->
<div class="map_tl">
    <div><input type="checkbox" name="0" title="在线终端" checked>在线终端</div>
    <div><input type="checkbox" name="1" title="故障终端" checked>故障终端</div>
    <div><input type="checkbox" name="2" title="离线终端" checked>离线终端</div>
</div>


</body>

</html>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="./js/fs/jcbm.js"></script>

